<template>
  <div v-loading="loading">
    <a-input-search
      placeholder="完整的姓名或者登陆名"
      @search="onSearch"
      enterButton
    />
    <a-button v-show="btnShow" type="primary" style="margin: 0 34px;" @click="enterLoading">
      加载失败，点击重新加载...
    </a-button>
    <div class="tree">
      <el-tree
        class="filter-tree"
        :data="orgTreeList"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @node-click='handleNodeClick'
        @dblclick.native="handleNodeDbClick"
        :empty-text="emptyText"
        ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <span v-if="data.type=='User'"><img :src="data.isOnline<30? userOnline : userOffline"/></span>{{ node.label }}
            </span>
        </span>
      </el-tree>
    </div>
    <div class="treefooter">
      <p style="margin: 5px 0px">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<span>{{userName}}</span></p>
      <p style="margin-bottom: 5px;">登录帐号：<span>{{loginName}}</span></p>
      <p style="margin-bottom: 5px;">办公电话：<span>{{officePhone}}</span></p>
      <p style="margin-bottom: 5px;">手机号码：<span>{{mobilePhone}}</span></p>
      <p style="margin-bottom: 5px;">电子邮件：<span>{{email}}</span></p>
      <p style="margin-bottom: 5px;">Q&nbsp;Q&nbsp;号码：<span>{{qq}}</span></p>
      <p style="margin-bottom: 5px;">其他信息：<span>{{otherInfo}}</span></p>
    </div>
  </div>

</template>

<script>
  import user0 from '../../assets/user_0.png'
  import user1 from '../../assets/user_1.png'

  export default {
    data() {
      return {
        filterText: '',
        emptyText: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        userOnline: user1,
        userOffline: user0,
        nodeData: {},
        loading: true,
        btnShow: false,
        orgTreeList: [],
        userName: '',
        loginName: '',
        officePhone: '',
        mobilePhone: '',
        email: '',
        qq: '',
        otherInfo: '',
      }
    },
    methods: {
      onSearch(value) {
        this.userName = ""
        this.loginName = ""
        this.officePhone = ""
        this.mobilePhone = ""
        this.email = ""
        this.qq = ""
        this.otherInfo = ""
        this.$refs.tree.filter(value)
      },
      enterLoading() {
        this.btnShow = false
        this.getOrgTreeList()
      },
      handleNodeDbClick() {
        //叶子节点
        if (!this.nodeData.children) {
          try {
            let url = 'imwork://sendmsg/?startup=0&ssname=default&server=' +
              this.nodeData.serverIP + '&port=5551&loginname=' +
              this.nodeData.userName.trim() + '&valid_type=-3&valid_code=' +
              this.nodeData.userTicket + '&ip=' +
              this.nodeData.userIP + '&receiver=' +
              this.nodeData.loginName.trim() + '@default&receiver_type=1'
            window.open(url, '_parent')
          } catch (err) {

          }
        }
      },
      handleNodeClick(data) {
        this.nodeData = data
        //叶子节点
        if (!data.children) {
          this.userName = data.name
          this.loginName = data.loginName
          this.officePhone = data.officePhone
          this.mobilePhone = data.mobilePhone
          this.email = data.email
          this.qq = data.qq
          this.otherInfo = data.otherInfo
        }
      },
      filterNode(value, data) {
        if (!value) return true
        if (!data.children) {
          return (data.name.indexOf(value) !== -1 || data.loginName.indexOf(value) !== -1) && (value.indexOf(data.name) !== -1 || value.indexOf(data.loginName) !== -1)
        }
        return false
      },
      getOrgTreeList() {
        this.loading = true
        let baseUrl = process.env.VUE_APP_ADD_HTTP
        let params = {
          path: baseUrl
        }
        this.getRequest('/common/GetOrgTreeList', params).then(res => {
          this.btnShow = false
          this.orgTreeList = JSON.parse(res.result).data
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.btnShow = true
        })
      }
    },
    mounted() {
      this.getOrgTreeList()
    }
  }
</script>
<style scoped>
  .tree {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 227px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .treefooter {
    padding: 5px 0px 5px 20px;
    font-size: 12px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #EBEEF5;
  }
</style>